<template>
    <div class="exchangeHistory">
        <assets-head :title="$t('闪兑历史')" :back-func="backFunc" />
        <div class="px-32 mt-70">
            <div class="flex justify-between text-grey font-35 my-21">
                <span>{{ $t('从') }}</span>
                <span>{{ $t('至') }}</span>
            </div>
            <van-list v-model="loading" :finished="finished" :finished-text="$t('已经全部加载完毕')" @load="onLoad"
                :loading-text="$t('加载中...')" :offset="130">
                <ul class="flex flex-col">
                    <li v-for="item in list" :key="item.id" class="flex flex-col">
                        <p class="flex justify-between font-35 textColor">
                            <span>{{item.amount}} {{item.symbol.toUpperCase()}}</span>
                            <span>{{item.amount_to.toFixed(5)}} {{item.symbol_to.toUpperCase()}}</span>
                        </p>
                        <p class="flex justify-between font-30 text-grey mt-19 mb-45">
                            <span>{{item.create_time}}</span>
                            <span class="flex items-center">
                                <i :class="{
                                  'btnMain': item.state === 'submitted',
                                  'bg-red': item.state === 'canceled',
                                  'bg-green': item.state === 'created',
                                }" class="block  w-16 h-16 mr-10 rounded-full"></i>
                                {{ status[item.state] }}</span>
                        </p>
                    </li>
                </ul>
            </van-list>
        </div>
    </div>
</template>

<script>
import { List } from 'vant';
import { _exchangeHistory } from '@/API/fund.api';
import assetsHead from "@/components/assets-head";
export default {
    components: {
        assetsHead,
        [List.name]: List
    },
    data() {
        return {
            loading: true,
            finished: false,
            pageSize: 10,
            page_no: 1,
            list: [],
            status: {
                submitted: this.$t('已提交'),
                canceled: this.$t('已撤销'),
                created: this.$t('已完成')
            }
        }
    },
    created() {
        this.onLoad()

    },
    methods:{
        backFunc() {
          console.log('backFunc', this.$route.query)
          if (this.$route.query.type / 1 === 1) {
            this.$router.push({
              path: '/funds',
              query: {
                tab: 1
              }
            })
          } else if (this.$route.query.type / 1 === 0){
              this.$router.push({
                  path: '/funds',
                  query: {
                      tab: 0
                  }
              })
          } else {
            this.$router.go(-1)
          }
        },
        onLoad() { // 加载数据
            this.loading = true
            _exchangeHistory(this.page_no).then(data => {
                this.list = [...this.list, ...data]
                this.loading = false
                if (data.length < this.pageSize) {
                    this.finished = true
                }else{
                    this.page_no++
                }
            })
        },
        onClickLeft() {
            this.$router.go(-1);
        }
    }
}
</script>
<style lang="scss" scoped>

.exchangeHistory{
    width: 100%;
    box-sizing: border-box;
}
</style>
